<header class="container-fluid main-color" id="embed_page_header">
    <div class="row">
        <div class="col-2 col-sm-1 col-md-1 text-center"><a href="javascript:;" role="button" class="btn historyBack"><i class="ico mdi mdi-chevron-left"></i></a></div>
        <div class="col-8 col-sm-10 col-md-10 embed_header_title text-center">创建话题</div>
        <div class="col-2 col-sm-1 col-md-1 text-center"><a href="javascript:;" role="button" class="btn sidePanelDrawer" title="版块主页"><i class="ico mdi mdi-menu"></i></a></div>
    </div>
</header>
<div id="embed_page">
    <div class="container">
        <div class="main-color" style="padding:15px">
            <div class="alert alert-danger" role="alert" *ngIf="errorMessage.length > 0">
                <strong>oOps!</strong> {{errorMessage}}
            </div>
            <form name="form" data-submit="once" class="theme-form" (ngSubmit)="f.form.valid && publish(submitBtn)" #f="ngForm" novalidate>
            <div class="form-group row">
              <div class="col-12 col-sm-9 col-md-9">
                <input type="text" name="title" tabindex="2" class="form-control" placeholder="主题在此输入" [(ngModel)]="topic.title" #title="ngModel" [ngClass]="{ 'is-invalid': f.submitted && title.invalid }" required="required"/>
                <div *ngIf="f.submitted && title.invalid" class="invalid-feedback">
                  <div *ngIf="title.errors.required">请输入话题主题</div>
                </div>
              </div>
              <div class="col-12 col-sm-3 col-md-3" style="margin-top: -10px;">
                <select name="category" tabindex="1" class="form-control" [(ngModel)]="topic.category" #category="ngModel" [ngClass]="{ 'is-invalid': f.submitted && category.invalid }" required="required">
                  <option value="">选择话题类型</option>
                  <option *ngFor="let tc of categories" [ngValue]="tc.id">{{tc.names}}</option>
                </select>
                <div *ngIf="f.submitted && category.invalid" class="invalid-feedback">
                  <div *ngIf="category.errors.required">请选择话题类型</div>
                </div>
              </div>

            </div>
            <div class="form-group">
                <div>
                  <app-richeditor #editor></app-richeditor>
                </div>
            </div>
            <div class="form-group row">
                <div class="col-9 col-sm-9 col-md-9">
                  <div class="d-inline-block mr-2">
                    <select name="volumes" tabindex="4" class="form-control" [(ngModel)]="topic.volumes" (change)="changeBoardGroup($event)" #volumes="ngModel" [ngClass]="{ 'is-invalid': f.submitted && volumes.invalid }" required="required">
                      <option value="">选择版块组</option>
                      <option *ngFor="let vitem of boardGroupResult" [ngValue]="vitem.id" [selected]="vitem.id == topic.volumes">{{vitem.title}}</option>
                    </select>
                    <div *ngIf="f.submitted && volumes.invalid" class="invalid-feedback">
                      <div *ngIf="volumes.errors.required">请选择版块组</div>
                    </div>
                  </div>
                  <div class="d-inline-block">
                    <select name="board" tabindex="5" class="form-control" [(ngModel)]="topic.board" #board="ngModel" [ngClass]="{ 'is-invalid': f.submitted && board.invalid }" required="required">
                      <option value="">选择版块</option>
                      <option *ngFor="let bitem of boardResult" [ngValue]="bitem.id" [selected]="bitem.id == topic.board">{{bitem.title}}</option>                     
                    </select>
                    <div *ngIf="f.submitted && board.invalid" class="invalid-feedback">
                      <div *ngIf="board.errors.required">请选择版块</div>
                    </div>
                  </div>
                </div>
                <div class="col-3 col-sm-3 col-md-3 text-right">
                    <input type="submit" tabindex="6" class="btn btn-primary" value="发布" #submitBtn/>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>
